<template>
  <div class="box">
    <div class="form-card">
      <div class="title">投保人信息</div>
      <FormCreate :option="policyHolderOption">
        <!-- 插槽 -->
        <!-- <template v-slot>
          <van-button type="primary" plain>
            获取验证码
          </van-button>
        </template> -->
      </FormCreate>
      <van-button block type="primary" size="small" @click.stop="changeName">改变姓名</van-button>
    </div>

    <div class="form-card">
      <div class="title">被保人信息</div>
      <div v-for="(insure, idx) in insureOption" :key="idx + '_' + Math.random()">
        <div class="title2">被保人{{ idx + 1 }}</div>
        <FormCreate :option="insure"></FormCreate>
        <van-button v-if="insureOption.length != 1" block type="danger" size="small" @click="delInsure(idx)">
          删除该被保人{{ idx + 1 }}</van-button>
      </div>
    </div>



    <van-button block class="mt10" type="primary" @click.stop="saveEvt">保存</van-button>
  </div>

</template>

<script lang="ts" setup>
import { ref, h, computed } from 'vue'
import { FormCreate } from '@ny-ui'
import { showToast } from 'vant'
import TextTip from './components/TextTip.vue'; // 引入 TextTip 组件

// 性别选项
const sexColumn = computed(() => {
  let options = [
    { text: '男', value: 'F' },
    { text: '女', value: 'M' }
  ]
  // 如果城市是泰国，则增加人妖选项
  const cityItem = policyHolderOption.value.find(item => item.field === 'city')
  if (cityItem?.value == 'tailang') {
    options.push({ text: '人妖', value: 'R' })
  }
  return options
})

let policyHolderOption = ref([
  {
    field: 'name',
    value: '杨利龙',
    components: 'MInput',
    type: 'text',
    label: '姓名',
    inputAlign: 'right',
    placeholder: '请输入姓名',
    required: true,
    readonly: true,
    onBlur: (e: InputEvent) => {
      const target = e.target as HTMLInputElement;
      const val = target.value; // 获取输入框的值
      console.log('失焦', val)
      if (val && val.length < 2) {
        showToast('姓名长度必须大于1')
      }
    },
    onFocus: () => {
      console.log('聚焦', 1111)
    },
    slots: {
      before: () => h('div', '我是前置插槽'),
      after: () => h(
        TextTip,
        {
          txt: '我是后置插槽，可以点击我喔',
          onConFirm: (txt: string) => {
            console.log('组件回调参数：', txt)
          }
        }
      ),
      button: () => h(
        'van-button', // 组件名称
        {
          slot: 'button', // 插槽属性
          type: 'primary', // 其他属性
          plain: true, // 布尔属性
          onClick: (e: Event) => {
            console.log(e, 11111)
          }
        },
        '获取验证码' // 插槽内容
      )
    }
  },
  {
    field: 'phone',
    value: '15171311521',
    components: 'MInput',
    type: 'number',
    label: '手机号',
    inputAlign: 'right',
    placeholder: '请输入手机号',
    pattern: /^1[3-9]\d{9}$/,
    patternTip: '手机号格式不正确', // 错误提示信息
    onBlur: (e: InputEvent, item: any) => {
      console.log(item, '该项')
      const target = e.target as HTMLInputElement;
      const val = target.value; // 获取输入框的值
      console.log('失焦2222', val)
      const pattern = item.pattern;
      if (pattern && !pattern.test(val)) {
        showToast('手机号格式不正确'); // 提示用户
      }
    }
  },
  {
    field: 'age',
    value: '',
    components: 'MInput',
    type: 'number',
    label: '年龄',
    inputAlign: 'right',
    placeholder: '请输入年龄',
    isShow: false,
    onBlur: (e: InputEvent) => {
      const target = e.target as HTMLInputElement;
      const val = target.value; // 获取输入框的值
      console.log('失焦333', val)
    }
  },
  {
    field: 'city',
    value: '', // 值
    valueText: '', // 值显示的文字
    components: 'MSelect',
    type: 'text',
    label: '城市',
    inputAlign: 'right',
    readonly: true,
    required: true,
    placeholder: '请选择城市',
    rightIcon: 'arrow-down', // 右侧图标
    // 点击右侧图标
    onClickRightIcon: (e: MouseEvent) => {
      e.stopPropagation() // 阻止冒泡到输入框的click事件
      showToast('必须选择城市，城市是必选的喔~'); // 提示用户
    },
    columns: [
      { text: '杭州', value: 'Hangzhou', tip: '这是杭州' },
      { text: '宁波', value: 'Ningbo' },
      { text: '温州', value: 'Wenzhou', tip: '这是温州' },
      { text: '绍兴', value: 'Shaoxing' },
      { text: '湖州', value: 'Huzhou', disabled: true },
      { text: '泰国', value: 'tailang' },
    ],
    onConfirm: (e: { selectedIndexes: Array<any>; selectedOptions: Array<any>, selectedValues: Array<any> }, item: any) => {
      item.value = e.selectedOptions[0]?.value
      item.valueText = e.selectedOptions[0]?.text
    }
  },
  {
    field: 'gender',
    value: '', // 值
    valueText: '', // 值显示的文字
    components: 'MSelect',
    type: 'text',
    label: '性别',
    inputAlign: 'right',
    readonly: true,
    required: true,
    placeholder: '请选择性别',
    rightIcon: 'question-o', // 右侧图标
    // 点击右侧图标
    onClickRightIcon: (e: MouseEvent) => {
      e.stopPropagation() // 阻止冒泡到输入框的click事件
      showToast('必须选择性别，性别是必选的喔~'); // 提示用户
    },
    columns: sexColumn,
    onConfirm: (e: { selectedIndexes: Array<any>; selectedOptions: Array<any>, selectedValues: Array<any> }, item: any) => {
      item.value = e.selectedOptions[0]?.value
      item.valueText = e.selectedOptions[0]?.text
    }
  }
])

// 改变投保人名字
const changeName = () => {
  policyHolderOption.value[0].value = `杨利龙${Math.ceil(Math.random() * 100)}`
  console.log(policyHolderOption)
}
// 删除某个被保人
const delInsure = (idx: number) => {
  insureOption.value.splice(idx, 1)
}


const insureOption = ref([
  [{
    field: 'name',
    value: '杨利龙',
    components: 'MInput',
    type: 'text',
    label: '姓名',
    inputAlign: 'right',
    placeholder: '请输入姓名',
    required: true,
    readonly: true,
    onBlur: (e: InputEvent) => {
      const target = e.target as HTMLInputElement;
      const val = target.value; // 获取输入框的值
      console.log('失焦', val)
      if (val && val.length < 2) {
        showToast('姓名长度必须大于1')
      }
    },
    onFocus: () => {
      console.log('聚焦', 1111)
    }
  },
  {
    field: 'phone',
    value: '15171311521',
    components: 'MInput',
    type: 'number',
    label: '手机号',
    inputAlign: 'right',
    placeholder: '请输入手机号',
    pattern: /^1[3-9]\d{9}$/,
    patternTip: '手机号格式不正确',
    onBlur: (e: InputEvent, item: any) => {
      const target = e.target as HTMLInputElement;
      const val = target.value; // 获取输入框的值
      const pattern = item.pattern;
      if (pattern && !pattern.test(val)) {
        showToast(item.patternTip); // 提示用户
      }
    }
  }],
  [{
    field: 'name',
    value: '杨利龙2',
    components: 'MInput',
    type: 'text',
    label: '姓名',
    inputAlign: 'right',
    placeholder: '请输入姓名',
    required: true,
    readonly: true,
    onBlur: (e: InputEvent) => {
      const target = e.target as HTMLInputElement;
      const val = target.value; // 获取输入框的值
      console.log('失焦', val)
      if (val && val.length < 2) {
        showToast('姓名长度必须大于1')
      }
    },
    onFocus: () => {
      console.log('聚焦', 1111)
    }
  },
  {
    field: 'phone',
    value: '15171311522',
    components: 'MInput',
    type: 'number',
    label: '手机号',
    inputAlign: 'right',
    placeholder: '请输入手机号',
    pattern: /^1[3-9]\d{9}$/,
    patternTip: '手机号格式不正确',
    onBlur: (e: InputEvent, item: any) => {
      const target = e.target as HTMLInputElement;
      const val = target.value; // 获取输入框的值
      const pattern = item.pattern;
      if (pattern && !pattern.test(val)) {
        showToast('手机号格式不正确'); // 提示用户
      }
    }
  }],
])


// 保存，提交表单
const saveEvt = () => {
  // 校验投保人
  for (let i = 0; i < policyHolderOption.value.length; i++) {
    const item = policyHolderOption.value[i] as any
    // 必填项，但是没有值
    if (item.required && !item.value) {
      showToast(`${item.label}未填写`)
      return
    }
    if (item.value && item.pattern) {
      if (!item.pattern.test(item.value)) {
        showToast(item.patternTip)
        return
      }
    }
  }
  // 校验被保人， 二维数组

}

</script>

<style scoped>
.box {
  background: #f9f9f9;
}

.form-card {
  background: #fff;
  padding: 16px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.title {
  font-weight: bold;
  font-size: 16px;
  line-height: 40px;
  margin: 10px;
}

.title2 {
  font-weight: bold;
  font-size: 16px;
}

.mt10 {
  margin-top: 10px;
}
</style>